<template>
<!--课程购买-->
  <div>
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
         <span v-if="type === 1">
            <router-link to="/">首页</router-link><span>></span><router-link to="/ziliao/chongzhi">学习币充值</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 2">
            <router-link to="/">首页</router-link><span>></span><router-link to="/ceping">人才能力测评</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 3">
            <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'courselist',query:{coursetype:0}}">推荐课程列表</router-link><span>></span><router-link :to="{name:'coursedetail',query:{courseId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 4">
            <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'offcourselist',query:{pageNumber:1}}">线下课程列表</router-link><span>></span><router-link :to="{name:'offcoursedetail',query:{courseId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 5">
            <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'zhibolist',query:{pageNumber:1}}">在线直播列表</router-link><span>></span><router-link :to="{name:'zhibodetail',query:{liveId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 6">
            <router-link to="/">首页</router-link><span>></span><router-link to="/vip">VIP会员</router-link><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 7">
            <router-link to="/">首页</router-link><span>></span><a href="javascript:;">考试报名</a><span>></span><span>结算中心</span>
          </span>
          <span v-if="type === 8">
            <router-link to="/">首页</router-link><span>></span><a href="javascript:;">继续教育</a><span>></span><span>结算中心</span>
          </span>
        </div>
      </div>
    </div>
    <div class="auto header">结算中心</div>
    <div class="clearfix auto padding250">
      <div class="left">
        <p class="buy">购买商品</p>
        <div class="clearfix">
          <img v-if="type !=7 && type != 8" :src="detail.img " alt="" width="217" class="pull-left">
          <img alt="" width="217" class="pull-left" src="../../assets/continue.png" v-if="type === 8"/>
          <img alt="" width="217" class="pull-left" src="../../assets/examination.png" v-else-if="type === 7"/>
          <ul class="cless">
            <li>{{detail.title}}</li>
            <li><span class="pull-right">价格：<span>￥{{detail.price}}</span></span></li>
            <li v-if="type !=7 && type != 8"><img src="../../assets/clock.png" alt="" width="14">{{detail.content}}</li>
          </ul>
        </div>
        <ul class="offer_money">
          <li>需支付金额</li>
          <li>应付金额：<span>￥{{detail.price}}</span></li>
        </ul>
      </div>
      <div class="left">
        <p class="buy">支付方式</p>
        <ul class="way">
          <li :class="{active:0===nowIndex}"  @click="toggle(0)">
            <img src="../../assets/radio.png" alt="" v-if="0 === nowIndex">
            <img src="../../assets/radio1.png" alt="" v-else>
            <label ><img src="../../assets/buy1.png" alt="" width="20">支付宝支付</label>
          </li>
          <li @click="toggle(1)" :class="{active:1===nowIndex}">
            <img src="../../assets/radio.png" alt="" v-if="1 === nowIndex">
            <img src="../../assets/radio1.png" alt="" v-else>
            <label ><img src="../../assets/buy2.png" alt="" width="21">微信支付</label>
          </li>
          <li @click="toggle(2)">
            <img src="../../assets/radio.png" alt="" v-if="2 === nowIndex">
            <img src="../../assets/radio1.png" alt="" v-else>
            <label ><span style="cursor: pointer">学习币</span><span class="total">可用学习币{{detail.userAmount}}</span><router-link to="/ziliao/chongzhi" >去充值学习币></router-link></label>
          </li>
        </ul>
        <Button class="offer_btn" @click="sure = true">立即支付</Button>
      </div>
    </div>
    <Modal class-name="vertical-center-modal" v-model="isShow" footer-hide width="300px" @on-cancel="modalChange">
      <ul class="model_content">
        <li v-if="detail.payType === 1">支付宝扫码支付</li>
        <li v-if="detail.payType === 2">微信扫码支付</li>
        <li><img :src="detail.url" alt="" width="251"></li>
        <li>支付成功后，系统将自动为您开通相应服务</li>
      </ul>
    </Modal>
    <Modal v-model="sure" title="支付确认" @on-ok="pay">
      <p>确定支付当前订单吗？</p>
    </Modal>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginF"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }
  .model_content{
    text-align: center;
    padding: 20px 0;
    li:first-child{
      color: #333;
      font-size: 16px;
      /*margin-bottom: 30px;*/
    }
    li:nth-child(3){
      color: #ff3300;
      font-size: 24px;
      /*margin: 20px 0;*/
    }
    li:last-child{
      font-size: 12px;
      color: #999;
    }
  }
  .agree .ivu-checkbox-wrapper{
    color: #666;
    /*font-size: 16px;*/
    font-size: 14px;
    margin-top: 15px ;
    a{
      color: #083C68;
    }
  }
  .divider{
    height: 60px;
    background-color: #2F261E;
    font-size: 14px;
    line-height: 60px;
    text-align: left;
    color: #fff;
    span{
      margin: 0 10px;
    }
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
  }
  .header{
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    font-size: 18px;
    color: #333;
    padding-left: 20px;
    margin: 30px auto;
    text-align: left;
  }
  .auto .left{
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    text-align: left;
    .buy{
      font-size: 18px;
      color: #333;
      border-bottom: 1px solid #dbdbdb;
      padding-bottom: 10px;
    }
    ul.cless{
      margin-left: 240px;
      li:first-child{
        font-size: 18px;
        color: #333;
      }
      li:nth-child(2){
        font-size: 16px;
        color: #666;
        padding-right: 20px;
        margin: 20px 0 10px;
        .pull-right{
          font-size: 14px;
          color: #999;
          span{
            color: #ff0000;
            font-size: 22px;
          }
        }
      }
      li:last-child{
        font-size: 12px;
        color: #999;
        img{
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
    .clearfix{
      border-bottom: 1px solid #dbdbdb;
      padding-bottom: 40px;
      padding-top: 20px;
    }
    .offer_money{
      font-size: 18px;
      color: #333;
      padding-top: 20px;
      li:last-child{
        color: #999;
        margin-top: 10px;
        span{
          font-size: 24px;
          color: #ff0000;
        }
      }
    }
    .way{
      padding-top: 20px;
      margin-right: -20px;
      li{
        display: inline-block;
        margin: 0 40px 30px 0;
        >img{
          vertical-align: middle;
          margin-right: 20px;
        }
      }
      li:last-child{
        display: block;
          font-size: 14px;
          color: #333;
          .total{
            margin:0 30px;
          }
        a{
          color: #957960;
        }
      }
      li:not(:last-child) label{
        width: 154px;
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        color: #333;
        border:1px solid #d9d9d9;
        text-align: center;
        display: inline-block;

        cursor: pointer;
        img{
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      li:last-child{
        margin-bottom: 6px;
      }
      li.active label{
        border-color: #00aaf0;
      }
    }
    .offer_btn{
      color: #fff;
      font-size: 16px;
      background-color: #957960;
      height: 53px;
      width: 227px;
      border-color: #957960;
      margin-top: 30px;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import loginmodal from '../template/loginmodal'
  import {balancePayWeb,centreInfoWeb,payorderStatusWeb,orderbuyPageWeb} from '../../http'
  import {getStore} from "../../storage";
  import {imgPathFilter} from '../../myFilters'
    export default {
        name: 'buy',
        props: {},
        data() {
            return {
              isSpinShow:false,
              doller:false,             //是否使用学习币
              nowIndex:0,              //支付方式
              isShow:false,            //支付确认
              agree:true,              //同意协议
              permitCoin:false,        //是否允许使用学习币  true允许使用学习币支付
              vipxy:false,            //是否同意vip使用协议
              type:-1,
              //定时器相关
              newTimer:false,
              timer: '',             //定时器
              orderStatus:'',       //后台订单状态
              status:0,             //支付状态:0默认值，1未完成，2完成，3关闭

              sure:false,  //支付确认框是否显示
              surePay:false,  //是否确认支付
              order:'',       //订单
              detail:{        //订单部分信息
                orderId : this.$route.query.orderId,      //订单号
                content : '',                             //订单提示
                img : this.$route.query.img,              //订单图片
                needRecharge : 0,                         //学习币支付是否够用 1不 足 2够用
                price : 0,                                //商品价格
                shortAmount : 0,                          //学习币支付缺少的学习币数量
                title : this.$route.query.title,
                userAmount : 0,                           //用户的学习币余额
                //支付相关
                url:'',         //微信二维码请求链接
                payType:1,      //判断支付方式选择  1支付宝   2微信  （3学习币支付没有使用这个参数做判断）
              },
              count:10,
              userId:'',
            };
        },
      methods: {
        //微信支付窗口发生变化,清除定时器
        modalChange(){
          clearInterval(this.timer);
        },
        //支付方式改变
        toggle(index){
          this.nowIndex = index;
          this.detail.payType = index + 1;
          this.doller = false;
          if(index === 2){
            this.doller = true;
          }
        },
        //支付二维码生成链接
        payCode(){
          if(this.detail.payType === 1) {
            // 跳转支付宝网页支付
            // setTimeout('window.open("http://api.cbstudy.com/base/common/toPay?payCode=AliPay&transactionType=PAGE&orderId=" + this.detail.orderId)', 500);
            // window.open("http://api.cbstudy.com/base/common/toPay?payCode=AliPay&transactionType=PAGE&orderId=" + this.detail.orderId);
            var tempWindow = window.open('', '_blank', ''); //打开一个新的空白窗口
            tempWindow.location.href = "http://api.cbstudy.com/base/common/toPay?payCode=AliPay&transactionType=PAGE&orderId=" + this.detail.orderId;  //对新打开的页面进行重定向
          }
          if(this.detail.payType === 2) {
            this.detail.url = 'http://api.cbstudy.com/base/common/toQrPay?transactionType=NATIVE&payCode=WxPay&orderId=' + this.detail.orderId;
            this.isShow = true;
          }
        },
        zhiFu(){
          if(this.doller) {     //使用学习币支付
            //学习币是否足够
            //订单是否允许使用学习币
            if(!this.permitCoin){
              this.$Notice.warning({
                title: "支付失败",
                desc: "当前订单不允许使用学习币支付！",
                duration: 3,
              });
            }else {
              if (this.detail.needRecharge === 1) {
                this.$Notice.warning({
                  title: "充值提醒",
                  desc: "学习币不足，请充值！",
                  duration: 3,
                });
              } else {
                balancePayWeb({orderId: this.detail.orderId}).then(res => {
                  if (res.code === 200) {
                    this.$router.push({name: 'success', query: {orderId: this.detail.orderId, type: 1}})
                  } else {
                    this.$Modal.error({
                      title: '支付结果',
                      content: '支付失败!'
                    })
                  }
                }).catch()
              }
            }
          }else{               //不使用学习币支付
            this.payCode();
            //二维码支付与监控
            if(this.timer !== null){
              clearInterval(this.timer)
            }
            if(this.detail.payType === 2) {
              this.timer = setInterval(() => {
                this.newTimer = true;
                //登录状态确认
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //订单状态查询
                    payorderStatusWeb({orderId: this.detail.orderId}).then(res => {
                      this.orderStatus = res.data.orderStatus.code;
                      //订单未支付
                      if (this.orderStatus === 'OS_UNPAID') {
                      }
                      //订单已完成
                      if (this.orderStatus === 'OS_FINISH') {
                        // this.status = 2;
                        clearInterval(this.timer);
                        this.$router.push({name: 'success', query: {orderId: this.detail.orderId}})
                      }
                      //订单已关闭
                      if (this.orderStatus === 'OS_CLOSE') {
                        clearInterval(this.timer);
                        this.$Notice.warning({
                          title: "支付失败",
                          desc: "订单超时，已关闭",
                          duration: 3,
                        });
                        this.isShow = false;
                      }
                    }).catch()
                  } else {
                    this.$refs.loginF.showModal();
                  }
                }).catch()
              }, 3000)
            }
          }
        },
        pay(){
          //支付状态确认
          this.surePay = true;
          this.newTimer = false;
          if (this.surePay) {
            //是否使用学习币
            centreInfoWeb().then(res => {
              if(res.code === 200) {
                //订单状态查询
                payorderStatusWeb({orderId: this.detail.orderId}).then(res => {
                  //订单未支付，允许支付
                  if(res.data.orderStatus.code === 'OS_UNPAID'){
                    this.zhiFu();
                  }else{
                    //订单不可支付，跳转首页
                    this.$Notice.warning({
                      title: '支付失败',
                      desc: '当前订单不可支付',
                      duration: 3,
                    });
                    this.$router.push({
                      path:'/'
                    })
                  }
                }).catch()
              }else{
                //未登录，显示登录框
                this.$refs.loginF.showModal();
              }
            }).catch()
          }
        },
        getBuy(){
          if(this.isSpinShow === false) {
            this.isSpinShow = true;
            //是否登录判断
            centreInfoWeb().then(res => {
              if (res.code === 200) {
                this.userId = res.data.id;
                orderbuyPageWeb({orderId: this.detail.orderId}).then(res => {
                  this.isSpinShow = false;
                  this.order = res.data.order;
                  //当前订单不是当前用户的订单
                  if (this.userId !== this.order.userId) {
                    this.$Notice.warning({
                      title: '支付失败',
                      desc: '您不可以支付当前订单',
                      duration: 3,
                    });
                    this.$router.push({
                      path: '/'
                    })
                  }
                  this.detail.content = res.data.content;
                  this.detail.img = res.data.order.orderImage;
                  this.detail.needRecharge = res.data.needRecharge;
                  this.detail.shortAmount = res.data.shortAmount;
                  this.detail.price = res.data.order.orderAmount;
                  this.detail.title = res.data.order.orderBody;
                  this.detail.userAmount = res.data.userAmount;
                  if (res.data.order.orderEntity.code === 'OT_TOP') {
                    this.permitCoin = false;
                    this.type = 1;
                  } else if (res.data.order.orderEntity.code === 'OT_COURSE') {
                    this.type = 3;
                    this.permitCoin = true;
                  } else if (res.data.order.orderEntity.code === 'OT_OFFCOURSE') {
                    this.permitCoin = true;
                    this.type = 4;
                  } else if (res.data.order.orderEntity.code === 'OT_APPRAISAL') {
                    this.type = 2;
                    this.permitCoin = true;
                  } else if (res.data.order.orderEntity.code === 'OT_LIVE') {
                    this.type = 5;
                    this.permitCoin = true;
                  } else if (res.data.order.orderEntity.code === 'OT_VIP'){
                    this.vipxy = true;
                    this.type = 6;
                    this.permitCoin = true;
                  } else if (res.data.order.orderEntity.code === 'OT-EXAM') {
                    this.type = 7;
                    this.permitCoin = true;
                  } else if (res.data.order.orderEntity.code === 'OT_STUDY') {
                    this.type = 8;
                    this.permitCoin = true;
                  }
                }).catch()
              } else {
                this.isSpinShow = false;
                this.$refs.loginF.showModal();
              }
            }).catch()
          }
        }
      },
      created() {
        this.getBuy()
      },
      //退出页面清除定时器
      destroyed(){
        clearInterval(this.timer);
      },
        components: {
          headers,
          footers,
          loginmodal
        }
    }
</script>
